<template>
	<view class="bigView">
		<z-paging ref="paging" :show-default-loading-more-text="false" v-model="dataList" @query="queryList">
			<!-- <view slot="top" style="display: flex;justify-content: center;background-color: white;">
				你好
			</view> -->
			<navBar slot="top" title="积分明细"></navBar>
			<view class="detailItem" v-for="(item,index) in dataList">
				<view class="titleTopView">
					<view class="title">{{item.exchangeRecordsTypeName}}</view>
					<view class="subTitle" v-if="item.ruleSettings>0">+{{item.ruleSettings}}</view>
					<view class="subTitle2" v-else>{{item.ruleSettings}}</view>
				</view>
				<view class="titleBottomView">
					<view class="title">{{item.updatedAtView}}</view>
					<!-- <view class="subTitle">剩余积分：920230032</view> -->
				</view>
			</view>
		</z-paging>
	</view>
</template>

<script>
	import navBar from "@/components/nav_bar.vue"
	import goods from '@/api/goods.js'
	export default{
		components:{
			navBar
		},
		data(){
			return {
				show: false,
				CustomBar: 0,//this.$statusBarHeight
				TopHeight:0,
				dataList:[],
				userInfo:{},
			}
		},
		mounted() {
			// this.listRequest()
			uni.getSystemInfo({success: (e) => {
				this.StatusBar = e.statusBarHeight;
				let custom = wx.getMenuButtonBoundingClientRect();
				this.CustomBar = custom.bottom + custom.top - e.statusBarHeight;
				this.TopHeight = this.CustomBar;//this.StatusBar+this.CustomBar;
			}})
			this.$nextTick(() =>{
				this.initUserInfo()
			})
		},
		methods:{
			initUserInfo(){
				const userInfo = uni.getStorageSync("userInfo")
				if(userInfo){
					this.userInfo = JSON.parse(userInfo)
				}
			},
			// @query所绑定的方法不要自己调用！！需要刷新列表数据时，只需要调用this.$refs.paging.reload()即可
			queryList(pageNo, pageSize) {
				goods.exchangeRecordsList({page:pageNo,size:pageSize}).then(res =>{
					let records = res.records;
					if(pageNo==1){
						this.dataList = res.records;
					}else{
						this.dataList.concat(records)
					}
					this.$refs.paging.complete(records);
				}).catch(error =>{
					this.$refs.paging.complete(false);
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.bigView{
	width: 100vw;
	height: 100vh;
	background-color: #F7F7F7;
	display: flex;
	flex-direction: column;
	overflow-y: auto;
}
.detailItem{
	width: 100vw;
	height: 88px;
	background-color: white;
	margin-top: 8px;
	display: flex;
	flex-direction: column;
}
.titleTopView{
	width: 100vw;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	font-size: 16px;
	// background-color: red;
	margin-top: 20px;
	.title{
		margin-left: 16px;
		color: black;
		height: 20px;
	}
	.subTitle{
		color: #11C770;
		margin-right: 16px;
	}
	.subTitle2{
		color: #FF3022;
		margin-right: 16px;
	}
}

.titleBottomView{
	width: 100vw;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	font-size: 12px;
	color: #999999;
	margin-top: 8px;
	.title{
		margin-left: 16px;
		height: 20px;
	}
	.subTitle{
		margin-right: 16px;
	}
}

</style>